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Prefácio 


Olá, leitor! 


Se você está lendo este livro, provavelmente está interessado 
em aprender mais sobre JavaScript. Este é um livro introdutório 
que visa fornecer uma base sólida para aqueles que estão 
começando a aprender a linguagem de programação mais 
popular do mundo. Aprender a programar pode ser desafiador, 
mas também pode ser incrivelmente gratificante. O objetivo 
deste livro é tornar a programação acessível a todos, 
independentemente de sua formação ou nível de experiência. 


Este livro cobre desde os princípios básicos da programação 
em JavaScript até tópicos mais avançados, como manipulação 
do DOM e interação com APIs. Cada capítulo foi 
cuidadosamente elaborado para ajudar você a desenvolver 
suas habilidades em JavaScript, com exemplos práticos e 
exercícios que ajudarão a reforçar o que você aprendeu. 


Além disso, este livro foi escrito por um autor apaixonado por 
programação e tecnologia. Bendev Junior é um empreendedor 
e programador brasileiro que tem dedicado sua carreira ao 
mundo da tecnologia. Ele acredita que a tecnologia tem o 
poder de mudar o mundo e está comprometido em 
compartilhar seus conhecimentos e paixão com outros que 
desejam ingressar na área. 


Esperamos que você encontre este livro útil e inspirador em 
sua jornada para se tornar um programador em JavaScript. Boa 
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leitura! 


Biografia do Autor 
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Bendev Junior, ou Benedito Manoel da Silva Junior, é um 
empreendedor e programador brasileiro que começou a 
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desbravar o universo da programação aos 15 anos de idade. 
Conhecido como Bendev Junior, uma mistura de Ben 10 e 
Benedito + Dev de desenvolvedor, ele é a alegria e energia em 
pessoa e descobriu sua verdadeira paixão no mundo 
tecnológico. De mecânico a mestre dos códigos, Bendev tem 
sido uma figura inspiradora para os jovens entusiastas da área. 
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Introdução 


Bem-vindo à "Desvendando o Código: A Jornada Mágica de 
JavaScript e TypeScript para Iniciantes"! Neste livro, você 
embarcará em uma aventura pelo mundo da programação, 
aprendendo os fundamentos dessas duas linguagens incríveis 
e populares. Eu, Bendev Junior, serei seu guia nesta viagem 
cheia de diversão, desafios e, claro, muitos códigos! 


JavaScript é uma linguagem de programação que tem sido 
usada por muitos anos no desenvolvimento web, e TypeScript, 
um superconjunto de JavaScript, traz recursos adicionais, como 
tipagem estática e melhor suporte à orientação a objetos. 
Combinando essas duas linguagens, você terá em mãos as 
ferramentas necessárias para criar aplicações web poderosas, 
escaláveis e eficientes. 


Neste livro, abordaremos desde os conceitos básicos de 
programação até tópicos mais avançados, como manipulação 
do DOM, interação com APIs e depuração de código. Ao longo 
do caminho, compartilharei com você dicas e truques que 
aprendi durante minha carreira como programador, para que 
você possa evitar armadilhas comuns e desenvolver suas 
habilidades de maneira mais rápida e eficaz. 
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Mas não se preocupe! Este livro foi escrito pensando em você, 
o iniciante, e todos os conceitos serão apresentados de forma 
simples, clara e, sempre que possível, com uma pitada de 
diversão. Afinal, aprender deve ser uma experiência prazerosa e 
empolgante! 


Então, pegue seu teclado, prepare-se para mergulhar no 
universo do JavaScript e TypeScript e vamos começar a 
transformar códigos em sonhos! 


O Mundo do JavaScript 


Bem-vindo ao fantástico mundo do JavaScript! Neste capítulo, 
vamos explorar a história e as características dessa linguagem 
de programação que conquistou o coração de 
desenvolvedores do mundo inteiro. 


Breve História 


O JavaScript foi criado em 1995 por Brendan Eich, um 
engenheiro da Netscape Communications. Originalmente 
chamado de Mocha e depois de LiveScript, o nome JavaScript 
foi adotado como uma jogada de marketing, aproveitando a 
popularidade do Java na época. Apesar dos nomes similares, é 
importante frisar que JavaScript e Java são linguagens de 
programação distintas. 


Desde então, o JavaScript evoluiu bastante e se tornou uma 
das linguagens mais utilizadas no desenvolvimento web. 
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Atualmente, é mantido pelo consórcio ECMA International, sob 
a especificação ECMAScript. 


Características do JavaScript 


Aqui estão algumas características marcantes do JavaScript: 


Ie 


Linguagem de script: O JavaScript é uma linguagem de 
script, ou seja, é executado diretamente no navegador do 
usuário, sem a necessidade de compilação prévia. 


. Orientação a objetos: O JavaScript é uma linguagem 


orientada a objetos, o que permite criar e manipular 
objetos para organizar e compartilhar código de maneira 
eficiente. 


. Event-driven: A linguagem permite criar interações com 


base em eventos, como cliques do mouse ou 
pressionamento de teclas, tornando a experiência do 
usuário mais dinâmica e interativa. 


. Linguagem interpretada: O JavaScript é interpretado pelo 


navegador, o que significa que o código é lido e 
executado diretamente, sem a necessidade de ser 
convertido em linguagem de máquina. 


. Cross-platform: O JavaScript é compatível com diferentes 


plataformas e navegadores, o que facilita a criação de 
aplicações web universais. 


Aplicações do JavaScript 
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O JavaScript é amplamente utilizado no desenvolvimento de 
aplicações web, permitindo adicionar interatividade e 
dinamismo às páginas. Algumas aplicações comuns incluem: 


e Manipulação de elementos HTML e CSS 

e Validação de formulários 

e Animações e transições 

e Manipulação de eventos 

e Criação de aplicações web de página única (SPA) 

e Desenvolvimento de aplicações para servidores com 
Node.js 


Agora que você já conhece um pouco mais sobre o mundo do 
JavaScript, está na hora de mergulhar de cabeça e aprender a 
dominar essa linguagem incrível! Vamos em frente! 


Começando com JavaScript 


Agora que você já conhece o mundo do JavaScript, é hora de 
dar os primeiros passos na prática! Neste capítulo, vamos 
aprender a configurar o ambiente e começar a escrever nossos 
primeiros códigos em JavaScript. 


Configurando o Ambiente 
Para começar a programar em JavaScript, tudo que você 


precisa é de um navegador e um editor de texto. Abaixo estão 
algumas sugestões de editores de texto: 
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e Visual Studio Code 
e Sublime Text 
e Atom 


Inserindo JavaScript no HTML 


Existem duas formas de inserir código JavaScript em uma 
página HTML: inline e utilizando um arquivo externo. 


Inline 


Você pode incluir código JavaScript diretamente no arquivo 
HTML usando a tag <script>: 


<!DOCTYPE html> 
<html> 
<head> 
<title>Meu primeiro código JavaScript</title> 
</head> 
<body> 


<h1>01á, Mundo!</h1> 


<script> 
console. log("0lá, Mundo 


[No 
bo /9 


</script> 


</body> 
</html> 
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Arquivo Externo 


Você também pode criar um arquivo separado com a extensão 
“js e incluí-lo no arquivo HTML utilizando a tag <script> 

com o atributo src. Por exemplo, crie um arquivo chamado 
main.js e coloque o seguinte conteúdo: 


console. log("0lá, Mundo!"); 


Em seguida, inclua o arquivo main.js em seu arquivo HTML: 


<!DOCTYPE html> 
<html> 
<head> 
<title>Meu primeiro código JavaScript</title> 
</head> 
<body> 


<h1>01á, Mundo!</h1> 
<script src="main.js"></script> 


</body> 
</html> 


Executando o Código 
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Para executar o código JavaScript, basta abrir o arquivo HTML 
em seu navegador de preferência. Você pode ver o resultado 
do console.1og no console do navegador. Para acessar o 
console, siga os passos abaixo: 


e Google Chrome: Pressione ctrl + Shift + 3 
(Windows/Linux) ou Cmd + Option + 3 (Mac). 
e Mozilla Firefox: Pressione Ctrl + Shift + K 
(Windows/Linux) ou Cmd + Option + k (Mac). 
e Safari: Pressione Cmd + Option + C. 


Agora você está pronto para começar a explorar e aprender 
JavaScript! No próximo capítulo, vamos nos aprofundar na 
linguagem e aprender seus fundamentos. 


Ambiente de Desenvolvimento 


Para se tornar um desenvolvedor JavaScript eficiente, é crucial 
configurar um ambiente de desenvolvimento adequado. Neste 
capítulo, apresentaremos as ferramentas e técnicas necessárias 
para criar um ambiente de desenvolvimento JavaScript 
eficiente e produtivo. 


Editor de Código 
Um bom editor de código é essencial para qualquer 


desenvolvedor. Aqui estão algumas opções populares para 
trabalhar com JavaScript: 
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e Visual Studio Code: Um editor de código open-source e 
gratuito desenvolvido pela Microsoft. Possui uma grande 
quantidade de extensões e recursos que facilitam o 
desenvolvimento em JavaScript. 


e Sublime Text: Um editor de código leve e rápido, com uma 
interface elegante e uma comunidade ativa que 
desenvolve plugins e extensões. 

e Atom: Um editor de código open-source desenvolvido 
pelo GitHub. Atom é altamente personalizável e possui 
uma ampla variedade de pacotes disponíveis para 
melhorar a experiência de desenvolvimento. 


Navegador Web 


Para testar e executar seu código JavaScript, você precisará de 
um navegador web atualizado. Recomendamos o uso de um 
dos seguintes navegadores: 


e Google Chrome 
e Mozilla Firefox 
e Microsoft Edge 


Ferramentas de Desenvolvimento 


A maioria dos navegadores modernos possui um conjunto de 
ferramentas de desenvolvimento integradas que ajudam a 
depurar e otimizar seu código JavaScript. Algumas das 
ferramentas mais úteis incluem: 
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e Console: Permite visualizar mensagens de log e erros do 
seu código JavaScript. Também é possível executar 
comandos diretamente no console. 


e Inspetor de Elementos: Permite inspecionar e modificar a 
estrutura do HTML e a aparência do CSS em tempo real. 


e Debugger: Ajuda a identificar e corrigir erros no código 
JavaScript ao permitir que você defina pontos de 
interrupção e inspecione variáveis e funções durante a 
execução do código. 


Extensões e Plugins 


Muitos editores de código, como o Visual Studio Code, 
permitem instalar extensões para melhorar a experiência de 
desenvolvimento em JavaScript. Algumas extensões populares 
incluem: 


e ESLint: Um linter para JavaScript que ajuda a identificar e 
corrigir problemas no seu código. 


e Prettier: Um formatador de código para garantir que seu 
código siga um estilo consistente e legível. 


e Debugger for Chrome: Permite depurar seu código 
JavaScript diretamente no Visual Studio Code usando o 
navegador Chrome. 


Gerenciadores de Pacotes 


Gerenciadores de pacotes ajudam a organizar e gerenciar 
dependências de projetos. Os gerenciadores de pacotes mais 
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populares para JavaScript são: 


e npm (Node Package Manager: O gerenciador de pacotes 
padrão para o ambiente de execução Node,s. O npm 
permite instalar e gerenciar bibliotecas e módulos 
JavaScript. 


e Yarn: Um gerenciador de pacotes alternativo criado pelo 
Facebook. Yarn é compatível com o registro npm e oferece 
melhorias em termos de velocidade e segurança. 


Ambiente de Execução 


Embora o JavaScript seja geralmente executado no 
navegador, você também pode usar o ambiente de 
execução Node.js para executar JavaScript no servidor. O 
Node.js é construído com base no motor V8 do Chrome e 
permite executar aplicativos JavaScript fora do navegador. 


Controle de Versão 


O controle de versão é uma parte importante do 
desenvolvimento de software, permitindo que você 
gerencie e rastreie as alterações no seu código. O sistema 
de controle de versão mais popular é o Git. Você pode 
usar O Git juntamente com serviços de hospedagem de 
código, como GitHub, GitLab e Bitbucket, para armazenar 
e compartilhar seu código. 
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Com um ambiente de desenvolvimento JavaScript bem 
configurado, você estará pronto para criar e executar 
aplicativos da web de maneira eficiente e produtiva. No 
próximo capítulo, abordaremos os princípios básicos da 
programação em JavaScript. 


Princípios Básicos de Programação 


Neste capítulo, exploraremos os princípios básicos de 
programação em JavaScript que são fundamentais para 
entender e escrever programas eficientes e eficazes. 


Comentários 
Comentários são uma parte essencial de qualquer código e 
ajudam a torná-lo mais legível e compreensível. Em JavaScript, 


você pode criar comentários de linha única usando // e 
comentários de várias linhas usando /* */. Por exemplo: 


// Este é um comentário de linha única 


/* Este é um 
comentário de 
várias linhas */ 


Estruturas de Controle 
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Estruturas de controle são fundamentais para a lógica de 
qualquer programa. Em JavaScript, você pode usar as seguintes 
estruturas de controle: 


Condição if, else if e else 


A estrutura if, else if e else permite executar blocos de 
código com base em condições específicas: 


let numero = 42; 


if (numero > 50) ( 
console. log("0 número 
+ else if (numero < 50) 
console. log("0 número 
> else ( 
console. log("O número é igual a 50"); 


maior que 50"); 


Ds MD 


menor que 50"); 


Laço for 


O laço for é usado para repetir um bloco de código um 
número específico de vezes: 


for (let i=0; i<s5; im) 
console.log('O valor de i é $(i)); 
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Laço while 


O laço while é usado para repetir um bloco de código 
enquanto uma condição específica for verdadeira: 


let i = 0; 


while (i< 5) 
console.log('0 valor de i é $(ij ); 
i++; 


Funções 


Funções são blocos de código reutilizáveis que podem ser 
chamados com diferentes argumentos. Em JavaScript, você 
pode criar funções usando a palavra-chave function : 


function saudacao (nome) ( 
console. log( Olá, $(nome)!'); 


“o 


saudacao("Bendev"); // Output: Olá, Bendev! 


Objetos 
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Objetos são uma parte essencial do JavaScript e permitem 
organizar e agrupar dados e funções relacionadas. Você pode 
criar objetos usando a notação literal de objetos: 


let pessoa = ( 
nome: "Bendev”, 
idade: 24, 
saudacao: function() 
console. log(' Olá, meu nome é $(this.nome) e eu 
tenho $(this.idade) anos.” ); 


pessoa.saudacao(); // Output: Olá, meu nome é Bendev e 
eu tenho 24 anos. 


Ao dominar esses princípios básicos de programação, você 
estará mais bem preparado para entender e escrever 
programas eficientes e eficazes em JavaScript. No próximo 
capítulo, abordaremos as estruturas de controle em mais 
detalhes. 


Estruturas de Controle 


Neste capítulo, abordaremos as estruturas de controle em 
JavaScript com mais detalhes. Estruturas de controle são 
fundamentais para controlar o fluxo de execução de um 
programa e tomar decisões com base em condições 
específicas. 
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Condição if, else if e else 


As estruturas if, else if e else permitem executar 
diferentes blocos de código com base em condições. Vamos 
analisar um exemplo mais detalhado: 


let temperatura = 25; 


if (temperatura > 30) ( 
console. log("Está muito quente! "); 

- else if (temperatura >= 20 && temperatura <= 30) « 
console. log("Está agradável!"); 

) else ( 


console. log("Está frio!"); 


No exemplo acima, o código verifica se a temperatura é maior 
que 30, entre 20 e 30, ou menor que 20, e imprime uma 
mensagem adequada no console. 


Operador Ternário 


O operador ternário é uma forma mais concisa de escrever 
uma instrução if-else para atribuição de valor a uma 
variável. A sintaxe é condição ? valorSeVerdadeiro : 
valorseFalso . Por exemplo: 
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let temperatura = 25; 
let clima = temperatura > 30 ? “quente” : "agradável"; 
console.log(' 0 clima está $(clima).' ); 


Laços de Repetição 


Laços de repetição são usados para executar um bloco de 
código várias vezes. JavaScript possui duas principais estruturas 
de laço: for e while. 


Laço for 


O laço for é usado quando você sabe quantas vezes deseja 
executar um bloco de código. A sintaxe é for (inicialização; 
condição; incremento) . Por exemplo: 


For Qletlil= 15 0 <= dos ai 


r 


Er 
console. log( O número é $(iJ ); 


Laço while 


O laço while é usado quando você deseja executar um bloco 
de código enquanto uma condição específica for verdadeira. A 
sintaxe é while (condição) . Por exemplo: 
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let do =04 


while (i <= 10) ( 
console. log(" O número é $(iJ ); 
l++; 


Laço do...while 


O laço do...while é semelhante ao laço while, mas a 
condição é verificada após a execução do bloco de código. Isso 
garante que o bloco de código seja executado pelo menos 


uma vez. A sintaxe é do 4 ... ) while (condição) . Por 
exemplo: 

let = 

do ( 


console. log(' O número é $(i) ); 
i++; 
+ while (i <= 10); 


Controle de Laço 


JavaScript possui duas palavras-chave para controlar laços: 
break e continue. 
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break 


A palavra-chave break é usada para interromper a execução 
de um laço. Por exemplo: 


for (let à = 1; 
Tid==0]5)0 
break; 
> 
console. log(' O número é $(i) ); 


i <= 10; im) | 


// Output: 

// O número é 1 
// O número é 2 
// O número é 3 
// O número é 4 


No exemplo acima, o laço for é interrompido quando i é 
igual a 5 e os números de 1 a 4 são impressos no console. 


continue 
continue A palavra-chave continue é usada para pular a 


iteração atual de um laço e continuar com a próxima iteração. 
Por exemplo: 
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for (let i=1; i <= 10; im) | 
RIA E===D0) 
continue; 
Hi 
console. log(' O número é $(i) ); 


// Output: 

// O número é 1 
// O número é 3 
// O número é 5 
// O número é 7 
// O número é 9 


No exemplo acima, o laço for pula números pares e imprime 
apenas os números ímpares de 1 a 10 no console. 


Dominar o uso de estruturas de controle é fundamental para 
escrever programas eficientes e eficazes em JavaScript. No 
próximo capítulo, abordaremos funções e objetos em mais 
detalhes. 


Funções e Objetos 


Neste capítulo, abordaremos funções e objetos em JavaScript 
com mais detalhes. Funções e objetos são componentes 
essenciais para a criação de aplicativos da web robustos e 
escaláveis. 
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Funções 


Funções são blocos de código reutilizáveis que podem ser 
chamados com diferentes argumentos. Vamos explorar os 
diferentes tipos de funções e como elas podem ser usadas. 


Funções Declarativas 


Funções declarativas são criadas usando a palavra-chave 
function . Essas funções são nomeadas e podem ser 
chamadas antes de sua definição devido ao hoisting 
(içamento): 


function saudacao(nome) ( 
console. log( Olá, $(nomes!') 


saudacao("Bendev"); // Output: Olá, Bendev! 


Funções Expressão 


Funções expressão são criadas ao atribuir uma função anônima 
a uma variável. Funções expressão não são içadas e só podem 
ser chamadas após sua definição: 
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let saudacao = function(nome) ( 
console. log( Olá, $(nomej! ); 


1. 
js 


saudacao("Bendev"); // Output: Olá, Bendev! 


Arrow Functions 


Arrow functions são uma sintaxe mais curta para escrever 
funções expressão. Elas também têm algumas diferenças em 
relação às funções tradicionais, como o comportamento da 
palavra-chave this : 


let saudacao = (nome) => ( 


console. log( Olá, $(nome)!'); 


1. 
js 


saudacao("Bendev"); // Output: Olá, Bendev! 


Objetos 


Objetos em JavaScript são coleções de pares chave-valor que 
podem armazenar dados e funções relacionadas. Vamos 
explorar como criar e manipular objetos. 


Notação Literal de Objetos 
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A notação literal de objetos é a maneira mais comum de criar 
objetos em JavaScript: 


let pessoa = ( 
nome: "Bendev", 
idade: 24, 
saudacao: function() 
console. log(' Olá, meu nome é $(this.nome) e eu 
tenho $(this.idade) anos. ); 


; 


1. 
SRE) 


pessoa.saudacao(); // Output: Olá, meu nome é Bendev e 
eu tenho 24 anos. 


Construtor de Objetos 


Você também pode criar objetos usando funções construtoras 
e a palavra-chave new : 


Desvendando o Código: A Jornada Mágica de JavaScript para Iniciantes por Bendev ) 


function Pessoa(nome, idade) ( 
this.nome = nome; 
this.idade = idade; 
this.saudacao = function() 
console. log(' Olá, meu nome é $(this.nome) e eu 
tenho $(this.idade) anos.'); 


hs 


Cçl. 


let bendev = new Pessoa("Bendev”, 24); 
bendev.saudacao(); // Output: Olá, meu nome é Bendev e 
eu tenho 24 anos. 


Protótipos 


Em JavaScript, objetos herdam propriedades e métodos de 
seus protótipos. Os protótipos são objetos que servem como 
modelos para outros objetos. Você pode adicionar 
propriedades e métodos a um protótipo e todos os objetos 
que herdam desse protótipo terão acesso a essas propriedades 
e métodos: 
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function Pessoa(nome, idade) ( 
this.nome = nome; 
this.idade = idade; 


“o 


Pessoa.prototype.saudacao = function() ( 

console. log(' Olá, meu nome é $(this.nome) e eu tenho 
$[this.idade) anos. ); 
>; 
let bendev = new Pessoa("Bendev”, 24); 
bendev.saudacao(); // Output: Olá, meu nome é Bendev e 
eu tenho 24 anos. 


No exemplo acima, adicionamos o método saudacao ao 
protótipo Pessoa . Isso significa que todos os objetos criados 
usando o construtor Pessoa terão acesso a esse método. 
Entender funções e objetos em JavaScript é crucial para criar 
aplicativos da web bem estruturados e eficientes. No próximo 
capítulo, abordaremos arrays e coleções em mais detalhes. 


Arrays e Coleções 


Neste capítulo, exploraremos arrays e coleções em JavaScript, 
que são estruturas de dados fundamentais para armazenar e 
manipular listas de itens. 


Arrays 
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Arrays são listas ordenadas de valores que podem ser 
acessados por índice. Vamos examinar como criar e trabalhar 
com arrays. 


Criando Arrays 


Você pode criar arrays usando a notação literal de colchetes 
( [] ) ou usando o construtor Array : 


let frutas = ["maçã”, “banana”, "laranja"]; 
let numeros = new Array(1, 2, 3, 4, 5); 


Acessando e Modificando Arrays 
Para acessar e modificar elementos em um array, use colchetes 


e o índice do elemento: 


console.log(frutas[0]); // Output: maçã 
frutas[1] = "uva"; 

console.log(frutas); // Output: ["maçã”, "uva", 
“"laranja”] 


Métodos de Array 


JavaScript fornece vários métodos úteis para trabalhar com 
arrays. Aqui estão alguns exemplos: 
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e push() : Adiciona um elemento ao final do array. 

e pop(): Remove o último elemento do array. 

e shift() : Remove o primeiro elemento do array. 

e unshift() : Adiciona um elemento ao início do array. 
e splice() : Adiciona ou remove elementos do array. 
e slice(): Retorna uma cópia de parte do array. 

e concat() : Combina dois ou mais arrays. 


e forEach() : Executa uma função para cada elemento do 
array. 


Coleções 


Além dos arrays, JavaScript fornece outras estruturas de dados 
para armazenar e manipular coleções de itens, como set e 
Map. 


Set 


Um set é uma coleção de valores únicos, ou seja, cada valor 
só pode ocorrer uma vez no conjunto. Aqui estão alguns 
exemplos de como usar conjuntos: 
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let frutas = new Set(["maçã”, "banana", "laranja"]); 
frutas.add("uva"); 

console.log(frutas); // Output: Set(4) ("maçã”, 
"banana", “laranja”, “uva” 

frutas .delete("banana”"); 

console. log(frutas); // Output: Set(3) ("maçã”, 


"laranja", “uva” 


console. log(frutas.has("laranja")); // Output: true 


Map 


Um Map é uma coleção de pares chave-valor, semelhante a 
um objeto. No entanto, as chaves de um Map podem ser de 
qualquer tipo, não apenas strings: 
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let frutas = new Map([ 
[ "maçã", 5], 
["banana", 10], 
Elanangaro is 

1); 


frutas.set("uva", 20); 
console. log(frutas); // Output: Map(4) ("maçã” => 5, 
"banana" => 10, "laranja" => 15, "uva" => 20) 


frutas.delete("banana"); 
console. log(frutas); // Output: Map(3) (“maçã” => 5, 
Plarangal => 1550 Cuval => 20) 


console. log(frutas.get("laranja")); // Output: 15 


Dominar o uso de arrays e coleções em JavaScript é essencial 
para lidar com dados e criar aplicações dinâmicas. No próximo 
capítulo, abordaremos a manipulação do Document Object 
Model (DOM), que é um componente-chave para criar 
aplicações web interativas com JavaScript. 


Manipulação do DOM 


O Document Object Model (DOM) é uma representação em 
árvore dos elementos de uma página HTML. JavaScript pode 
ser usado para manipular e interagir com o DOM, permitindo 
que você crie páginas web dinâmicas e interativas. 
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Selecionando Elementos 


Para manipular elementos HTML com JavaScript, você primeiro 
precisa selecioná-los. Existem várias maneiras de selecionar 
elementos no DOM: 


e getElementById() : Seleciona um elemento pelo seu 
atributo id. 


e getElementsByClassName() : Seleciona elementos pela 
classe. 


e getElementsByTagName() : Seleciona elementos pela tag. 


e querySelector() : Seleciona o primeiro elemento que 
corresponde a um seletor CSS. 


e querySelectorall() : Seleciona todos os elementos que 
correspondem a um seletor CSS. 


let titulo = document. getElementById("titulo"); 
let itens = document. getElementsByClassName("item"); 


let paragrafos = document. getElementsByTagName("p"); 


(MAMA 


let primeiroLink = document. querySelector("a"); 
let links = document. querySelectoralI("a"); 


Modificando Elementos 


Após selecionar um elemento, você pode modificar seus 
atributos, conteúdo e estilo: 
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titulo.textContent = "Novo Título"; // Altera o texto 
do elemento 

titulo.style.color = "blue"; // Altera a cor do texto 
titulo.setaAttribute("data-novo-atributo", "valor"); // 
Adiciona um novo atributo 


Adicionando e Removendo Elementos 


Você também pode adicionar, remover e modificar elementos 
no DOM: 


let novoParagrafo = document .createElement("p"); 
novoParagrafo.textContent = “Este é um novo 
parágrafo."; 

document .body. appendChild(novoParagrafo); // Adiciona o 
novo parágrafo ao final do body 


let paragrafoRemovido = document. querySelector("p"); 


document . body. removeChild(paragrafoRemovido); // Remove 
o primeiro parágrafo do body 


Eventos 
Eventos são ações que ocorrem no navegador, como cliques, 


carregamento de uma página e pressionamento de teclas. Você 
pode usar JavaScript para ouvir e responder a eventos: 
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let botao = document. querySelector("button"); 


botao. addEventListener("click”, function() « 
alert("Botão clicado!"); 


DDS 


Exemplo Prático de Manipulação do DOM e 
Eventos 


Neste exemplo, criaremos uma página HTML simples que 
demonstra a manipulação do DOM e o uso de eventos em 
JavaScript. A seguir está o código HTML e JavaScript básico 


para nossa página: 
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<!DOCTYPE html> 
<html lang="pt”> 
<head> 

<meta charset="UTF-8"> 

<meta name="viewport” content="width=device-width, 
initial-scale=1.0"> 

<title>Exemplo de Manipulação do DOM</title> 

<style> 

«hidden ( 
display: none; 
> 

</style> 
</head> 
<body> 

<hi id="titulo">Manipulação do DOM</h1> 

<p>Este é um exemplo de manipulação do DOM com 
JavaScript.</p> 

<button id="btnRevelar”">Revelar mensagem 
secreta</button> 

<p id="mensagemSecreta” class="hidden">Esta é a 
mensagem secreta!</p> 


<script> 
let btnRevelar = 
document . getElementById("btnRevelar"); 
let mensagemSecreta = 
document . getElementById("mensagemSecreta"); 


btnRevelar.addEventListener("click”", function() | 
mensagemSecreta.classList.remove("hidden"); 
btnRevelar.disabled = true; 


Ds 
</script> 

</body> 

</html> 


Neste exemplo, temos um título, um parágrafo e um botão. O 
botão "Revelar mensagem secreta" revelará um parágrafo 
oculto quando clicado. Para fazer isso, selecionamos o botão e 
o parágrafo oculto usando getElementById . Em seguida, 
adicionamos um ouvinte de evento ao botão para responder 
ao evento de clique. 


Quando o botão é clicado, removemos a classe CSS "hidden" 
do parágrafo da mensagem secreta, tornando-o visível. Além 
disso, desabilitamos o botão após o clique para evitar 
revelações repetidas da mensagem. 


Este exemplo simples demonstra como manipular o DOM e 
responder a eventos com JavaScript. 


Com a manipulação do DOM coberta, agora podemos avançar 
para a interação com APIs e AJAX, que são fundamentais para 
criar aplicações web modernas e dinâmicas. 


Interação com APIs e AJAX 


APIs (Application Programming Interfaces) são conjuntos de 
regras e protocolos que permitem que diferentes sistemas de 
software interajam uns com os outros. Em aplicações web, 
muitas vezes é necessário interagir com APIs para acessar e 
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manipular dados de diferentes fontes. AJAX (Asynchronous 
JavaScript and XML) é uma técnica que permite que você faça 
requisições assíncronas para APIs e atualize partes de uma 
página web sem a necessidade de recarregar toda a página. 


Fetch API 


A Fetch API é uma API nativa do JavaScript que permite fazer 
requisições HTTP de forma simples e moderna. Com ela, você 
pode interagir com APIs e obter dados de forma assíncrona. 


Aqui está um exemplo básico de como usar a Fetch API para 
fazer uma requisição GET a uma API: 


fetch("https://api.exemplo.com/dados") 
-then(response => response.json()) 
-then(dados => console. log(dados)) 
.catch(erro => console.error("Ocorreu um erro:”, 
erro)); 


No exemplo acima, fazemos uma requisição GET para a URL 
https://api.exemplo.com/dados . À função fetch() retorna 
uma promessa, que é resolvida com o objeto Response 

quando a requisição é concluída. Em seguida, convertemos a 
resposta em um objeto JSON e registramos os dados no 
console. Se ocorrer um erro durante a requisição, registramos o 
erro no console. 
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Requisições Assíncronas com Async/Await 


A sintaxe async/await é uma maneira mais moderna e limpa de 
trabalhar com promessas e requisições assíncronas. Você pode 
reescrever o exemplo anterior usando a sintaxe async/await: 


async function buscarDados() ( 
try 1 
let response = await 
fetch("https://api.exemplo.com/dados"); 
let dados = await response. json(); 
console. log(dados); 


Apre 


catch (erro) ( 
console.error("Ocorreu um erro:", erro); 


DD) 


buscarDados(); 


No exemplo acima, declaramos uma função assíncrona 
chamada buscarDados . Dentro da função, usamos a palavra- 
chave await para esperar pela conclusão das promessas 
retornadas por fetch() e response.json() . Se ocorrer um 
erro, ele será capturado pelo bloco catch e registrado no 
console. 


A interação com APIs e o uso de AJAX são fundamentais para 
criar aplicações web modernas e dinâmicas. No próximo 
capítulo, abordaremos testes e depuração no desenvolvimento 
de aplicações JavaScript. 
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Testes e Depuração 


Testes e depuração são partes importantes do 
desenvolvimento de aplicações JavaScript. Os testes garantem 
que o código funcione conforme o esperado e ajudam a 
identificar possíveis problemas. A depuração permite que você 
examine o comportamento do seu código e identifique e 
corrija erros. 


Para esta seção, vamos utilizar o Node;s, um ambiente de 
execução de JavaScript do lado do servidor. É importante que 
você já tenha o Node,js instalado em seu computador para 
continuar com os exemplos deste capítulo. Caso não tenha, 
você pode baixá-lo em nodejs.org. 


Testes Unitários 


Testes unitários são testes que verificam o comportamento de 
uma única unidade de código, como uma função ou um 
componente. Eles são úteis para garantir que uma parte 
específica do código funcione conforme o esperado e ajudam 
a identificar possíveis problemas. 


Existem várias bibliotecas de testes disponíveis para JavaScript, 
como Jest, Mocha e Jasmine. Vamos ver um exemplo simples 
de teste unitário usando Jest: 


1. Primeiro, instale o Jest como uma dependência de 
desenvolvimento: 
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npm install --save-dev jest 


2. Em seguida, crie uma função simples em um arquivo 
chamado soma.js : 


// soma.js 
function soma(a, b) ( 
return a + b; 


; 


module.exports = soma; 


3. Crie um arquivo de teste chamado soma.test.js : 


// soma.test.js 
const soma = require('./soma'); 


test('soma 1 + 2 deve retornar 3', () => 
expect(soma(1, 2)).toBe(3); 
IDE 


4. Adicione o seguinte script ao seu arquivo package.json : 
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Escirptsa: 
Etesty: Cqestã 


5. Execute o teste com o comando npm test. O Jest 
executará o teste e informará se ele passou ou falhou. 


Depuração 


A depuração é o processo de identificar e corrigir erros no 
código. Existem várias ferramentas e técnicas disponíveis para 
depurar código JavaScript. Uma das ferramentas mais comuns 
é o DevTools, disponível nos navegadores modernos como 
Chrome, Firefox e Edge. 


Para começar a depurar código JavaScript com o DevTools, siga 
estas etapas: 


1. Abra o DevTools no seu navegador. No Chrome, você 
pode fazer isso clicando com o botão direito do mouse em 
qualquer elemento da página e selecionando 
“Inspecionar” ou pressionando ctrl+shift+I (Windows) 
ou Cmd+0pt+I (Mac). 


2. Vá para a guia "Sources" (Fontes) ou "Debugger" 
(Depurador), dependendo do navegador. 
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3. Abra o arquivo JavaScript que deseja depurar. Você pode 
navegar pelos arquivos no painel esquerdo ou usar a 
função de busca ( Ctrl+P ou Cmd+P ) para encontrar 
rapidamente um arquivo pelo nome. 


4. Clique no número da linha de código onde deseja 
adicionar um ponto de interrupção. Um ponto de 
interrupção é um marcador que faz com que o código 
pare de ser executado nesse ponto específico. 


5. Recarregue a página ou execute a ação que aciona o 
código em questão. O código será interrompido no ponto 
de interrupção, e você poderá examinar o estado das 
variáveis, executar código no console e percorrer o código 
passo a passo. 


Além do DevTools, também podemos utilizar o Node.,js para 
depurar nossos códigos JavaScript. Para isso, basta utilizar a 
opção inspect na linha de comando do Node.js e conectar 
um cliente de depuração, como o DevTools. 


Por exemplo, se você quiser depurar um arquivo chamado 
meu-arquivo. js , basta executar o seguinte comando: 


node --inspect-brk meu-arquivo.js 


Isso fará com que o Node.js inicie a execução do arquivo em 
modo de depuração e aguarde a conexão de um cliente na 
porta 9229. Para conectar o DevTools ao Node,js, abra o 
Chrome e acesse a URL chrome://inspect . Na seção "Remote 
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Target”, você deverá ver o Node.js em execução. Clique no 
botão "Inspect" para abrir o DevTools e começar a depurar seu 
código. 


A depuração é uma habilidade importante para qualquer 
desenvolvedor. Com ela, você poderá identificar e corrigir erros 
em seu código de forma mais eficiente e garantir a qualidade 
de suas aplicações. 


Boas Práticas e Dicas 


Nesta seção, vamos ver algumas boas práticas e dicas para 
escrever código JavaScript de qualidade e evitar problemas 
comuns. 


1. Use Nomes Descritivos para Variáveis e 
Funções 

Nomes descritivos para variáveis e funções ajudam a tornar seu 
código mais legível e compreensível. Escolha nomes que 


descrevam claramente o propósito da variável ou função e 
evite abreviações ou nomes genéricos. 
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// Exemplo de nome descritivo 
const idadeUsuario = 30; 


function calcularIdade(dataNascimento) « 


Na 


2. Evite Variáveis Globais 


Variáveis globais são aquelas que podem ser acessadas de 
qualquer lugar do código, e devem ser evitadas sempre que 
possível. Elas tornam o código mais difícil de entender e de 
depurar, além de aumentar o risco de conflitos de nomes. 


// Exemplo de variável global 
let contador = 0; 


function incrementarContador() ( 


contador++; 


function resetarContador() ( 
contador = Q; 


“ 


Em vez disso, prefira passar valores entre funções como 
parâmetros ou armazená-los em objetos ou closures. 


Desvendando o Código: A Jornada Mágica de JavaScript para Iniciantes por Bendev ) 


3. Use Constantes para Valores que Não 
Mudam 


Constantes são valores que não podem ser alterados depois de 
definidos, e são uma forma de tornar o código mais seguro e 
legível. Use constantes para valores que não mudam ao longo 
do tempo, como constantes matemáticas ou valores de 
configuração. 


// Exemplo de uso de constante 
const PI = 3.14159; 


function calcularAreaCirculo(raio) ( 
const area = PI * raio * raio; 
return area; 


4. Evite Eval e With 


Eval e With são construções de linguagem que permitem 
executar código dinamicamente, o que pode tornar o código 
mais difícil de entender e de depurar, além de representar um 
risco de segurança. Evite o uso de eval e With sempre que 
possível. 
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// Exemplo de uso de eval 
const codigo = "console.log('0lá, mundo!'); 
eval(codigo); 


(o 
3) 


// Exemplo de uso de With 
const obj = ( nome: "Bendev", idade: 28 3; 
with (obj) ( 

console. log(nome, idade); 


5. Use Strict Mode 


O modo estrito (strict mode) é uma opção disponível em 
JavaScript que ativa um conjunto de regras mais rigorosas para 
a escrita do código. O modo estrito ajuda a evitar erros 
comuns e torna o código mais seguro e previsível. Para ativar o 
modo estrito, basta adicionar a seguinte linha no início do 
arquivo ou da função: 


'use strict"; 


6. Comente o Código Adequadamente 


Comentários são uma forma de documentar o código e torná- 
lo mais fácil de entender e manter. Use comentários para 
explicar o propósito do código, fornecer informações 
adicionais e alertar sobre possíveis problemas. 
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// Exemplo de comentário 

function calcularIdade(dataNascimento) « 
// Calcula a idade com base na data de nascimento 
const dataAtual = new Date 
const anoAtual = dataAtual.getFullYear(); 
const anoNascimento = dataNascimento.getFullYear(); 
const idade = anoAtual - anoNascimento; 


if (idade < 0) | 
// Alerta sobre ano de nascimento inválido 
console.warn('Ano de nascimento inválido'); 


LE) 


return idade; 


E 


7. Mantenha o Código Organizado 


Manter o código organizado é essencial para torná-lo legível e 
fácil de manter. Use indentação consistente, agrupe 
declarações relacionadas e divida o código em funções e 
módulos quando necessário. 
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// Exemplo de código organizado 

function calcularAreaRetangulo(base, altura) ( 
const area = base * altura; 
return area; 


function calcularAreaTriangulo(base, altura) ( 
const area = (base * altura) / 2; 
return area; 


“o 


const areaRetangulo = calcularAreaRetangulo(10, 5); 
const areaTriangulo = calcularAreaTriangulo(10, 5); 


console.log(" Área do retângulo: $(areaRetangulo) ); 
console.log(" Área do triângulo: $(areaTriangulo) ); 


8. Aprenda a Usar Ferramentas de Análise 
Estática 


Ferramentas de análise estática são programas que analisam o 
código fonte em busca de erros, problemas de segurança e 
outras vulnerabilidades. Aprender a usar essas ferramentas 
pode ajudar a melhorar a qualidade e a segurança do código, 
além de detectar problemas antes que eles se tornem críticos. 


Algumas ferramentas populares de análise estática para 
JavaScript são o ESLint e o JSHint. 
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Conclusão 


Este livro foi uma introdução ao mundo do JavaScript, com 
foco em programação para iniciantes. Vimos os princípios 
básicos da linguagem, estruturas de controle, funções, objetos, 
manipulação do DOM, interação com APIs e AJAX, testes e 
depuração, boas práticas e dicas. 


Espero que este livro tenha sido útil para você e que tenha 
despertado seu interesse pela programação em JavaScript. 
Lembre-se de que a prática é fundamental para o aprendizado, 
e que há muitos recursos disponíveis na internet para 
aprofundar seu conhecimento na área. 


Se você tiver alguma dúvida ou quiser continuar aprendendo, 
sinta-se à vontade para entrar em contato comigo em minhas 
redes sociais. Meu nome de usuário é QWbendevoficial no 
Twitter, Facebook e Instagram e /bendevjunior no Linkedln. 
Estou sempre compartilhando dicas e recursos úteis para 
programadores em minha comunidade, então não deixe de me 
seguir para ficar atualizado. 


Obrigado por ler este livro e boa sorte em sua jornada de 
programação! 
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